<template>
  <div class="page-dialog">
    <!-- 新增弹窗 -->
    <el-dialog :visible.sync="visible" :title="title" width="45%" class="add-dialog" @close="onClose">
      <el-form ref="form" :model="form" label-width="110px">
        <!-- {{clickValue}}
        {{form.type}} -->
        <el-form-item label="业务类别：" v-if="title === '办理'">
          <el-radio-group v-model="form.type">
            <el-radio label="提交"></el-radio>
            <el-radio label="退回"></el-radio>
            <el-radio label="挂起"></el-radio>
            <el-radio label="委办"></el-radio>
            <el-radio label="转办"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="项目名称：">
          <span>{{info.xmmc}}</span>
        </el-form-item>
        <el-form-item label="事项名称：">
          <span>{{info.xmmc1}}</span>
        </el-form-item>
        <el-form-item label="办理意见：" class="flex">
          <div class="handle-wrap">
            <el-input class="ui-input" v-model="form.lzyj" size="small" placeholder="请输入" clearable></el-input>
            <div>
              <el-button size="small" class="margin-lt" type="primary" plain>存为常用语</el-button>
            </div>
          </div>
        </el-form-item>
        <!-- -->
        <el-form-item label="选择办理人:" v-if="['提交', '转办', '委办'].indexOf(form.type) > -1" >
          <div class="handle-wrap">
            <div class="_lt">
              <el-input
                placeholder="输入关键字进行过滤"
                suffix-icon="el-icon-search"
                size="small"
                v-model="filterText">
              </el-input>

              <el-tree
                class="filter-tree"
                :data="data"
                :props="defaultProps"
                default-expand-all
                node-key="id"
                :filter-node-method="filterNode"
                ref="tree">
                <span class="custom-tree-node" slot-scope="{ node}">
                  <span>{{ node.label }}</span>
                  <span class="circle" v-if="!node.isLeaf">
                    {{node.childNodes.length}}
                  </span>
                </span>
              </el-tree>
            </div>
            <div class="_rt">
              <el-checkbox-group v-model="checkList">
                <el-checkbox label="张三"></el-checkbox>
                <el-checkbox label="李四"></el-checkbox>
                <el-checkbox label="王五"></el-checkbox>
                <el-checkbox label="王五2"></el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button size="small" @click="onClose">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import API from "@/api/businessApproval";
export default {
  name: "comonDialog",
  props: {
    clickValue:{
      type: String,
      default:'提交'
    },
    title: {
      required: true,
      type: String,
      default: '提示'
    },
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    proInfo: {
      type: Object,
      default () {
        return {}
      }
    },
   
  },

  data() {
    return {
      visible: this.dialogFormVisible,
      info: this.proInfo,
      form: {
        name: '',
        type: this.clickValue,
        lzyj: '',
      },
      filterText: '',
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      checkList: [],
    };
  },
  watch: {
    proInfo(val) {
      this.info = val;
    },
    clickValue(val) {
      // console.log(val)
      this.form.type=val
    },
    dialogFormVisible(val) {
      this.visible = this.dialogFormVisible;
      // if (val) {
      //   this.getBzlList();
      // }
      // console.log(this.clickValue)
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
  },
  methods: {
    // getBzlList() {
    //   let req = {
    //     processDefId : this.info.procDefId,
    //     taskDefId: '0'
    //   }
    //   API.nextActivityParticipants(req)
    //     .then(res => {
    //       console.log(res);
    //     })
    // },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    onClose() {
      this.$emit('close', false);
    },
    onSubmit() {
      let req = {
        "destTaskKeys": [],
        "lzyj": {
          "fshj": "",
          "fsrq": "",
          "fsry": "",
          "id": "",
          "lcbh": this.proInfo.lcbh,
          "lzyj": this.form.lzyj,
          "rwbh": "",
          "ssbm": ""
        },
        "participants": {
          "gisinfo": this.$store.state.user.userId || '',
        },
        "processDefId": this.proInfo.procDefId,
        "processInstId": this.proInfo.procInstId,
        "relativeData": {},
        "rwbId": this.proInfo.featid,
        "taskDefId": this.proInfo.taskDefKey,
        "taskId": this.proInfo.id,
        "type": ""
      }
      let flow;
      if (this.form.type === '提交') {
        flow = 'lcfs';
      } else if (this.form.type === '退回') {
        flow = 'parallel';
      }
      API[flow](JSON.stringify(req))
        .then(res => {
          if (res.data.result.success) {
             this.$message.success(`${this.form.type}成功！`);
          } else {
            this.$message.success(`${this.form.type}失败！`);
          }
          setTimeout(() => {
            this.onClose();
          }, 1000)
        })
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

.page-dialog {
  .add-dialog {
    .handle-wrap {
      width: 100%;
      display: flex;
      .margin-lt {
        margin-left: 12px;
      }
      ._lt {
        width: 45%;
        padding-right: 5%;
        border-right: 1px solid #e0e1e2;
        .filter-tree {
          margin-top: 10px;
        }
      }
      ._rt {
        padding-left: 8%;
        width: 42%;
        display: flex;
        align-items: center;
      }
    }
  }
}

/deep/ .add-dialog .el-dialog .el-dialog__header {
  background: #f4f6f8!important;
}
/deep/ .add-dialog .el-dialog .flex .el-form-item__content {
  display: flex;
}
// /deep/ .add-dialog .el-dialog .flex .el-form-item__content button {
//   margin-left: 12px;
// }
/deep/ .add-dialog .el-checkbox {
  display: block;
}
/deep/ .add-dialog .el-dialog__title {
  font-weight: bold;
}
/deep/ .add-dialog .el-dialog__close {
  font-size: 18px!important;
}
/deep/ .add-dialog .el-dialog__header {
  padding: 18px;
}
/deep/ .add-dialog .el-form-item__label {
  color: #86878c;
}
/deep/ .add-dialog .el-tree-node {
  border: 1px solid transparent;
}
/deep/ .add-dialog .el-tree-node .el-tree-node__content {
  background: #fff!important;
}
/deep/ .add-dialog .el-tree-node__children .el-tree-node.is-expanded.is-current.is-focusable {
  border: 1px solid #0098ff;
  border-radius: 2px;
  color: #0098ff;
  background: #fff!important;
}
/deep/ .handle-wrap>._lt>.el-tree>.el-tree-node>.el-tree-node__content>.el-tree-node__expand-icon {
  font-size: 18px;
  color: #4e5157;
}
/deep/ .handle-wrap>._lt>.el-tree>.el-tree-node>.el-tree-node__content>.custom-tree-node {
  color: #4e5157;
  font-weight: 600;
}
/deep/ .custom-tree-node {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .circle {
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    background: #0098ff;
    color: #fff;
    font-size: 12px;
  }
}
</style>